<html><head><title>Mootools Tooltips</title>




<style type="text/css">
body {color:#000;background-color:#FFF; font-family:Arial, Helvetica, sans-serif;}


/*tooltip*/

div.tooltip {
	width: 200px;
	color: #fff;
	text-align: center;
}

div.tooltip h4 {
	color: #fff;
	font-weight: bold;
	text-shadow: 2px 2px 1px #222;
	margin: 0;
	padding: 13px 10px 5px;
	background: url(img/balloon.png) top left no-repeat !important;
	background: url(img/balloon.gif) top left no-repeat;
	font-size: 11px;
}

div.tooltip p {
	margin: 0;
	padding: 0 10px 15px;
	text-shadow: 2px 2px 1px #222;
	background: url(img/balloon.png) bottom left no-repeat !important;
	background: url(img/balloon.gif) bottom left no-repeat;
	font-size: 10px;
}

</style>
<script type="text/javascript" src="mootools.js"></script>

<script type="text/javascript">



  window.onload=function()
  {
	
	
	/* setup tooltips */
	var as = [];

	$S('a').each(function(a){
		if (a.getAttribute('title')) as.push(a);
	});
	
	new Tips(as, {maxOpacity: 0.9, maxTitleChars: 25});

  }
  </script>
  
  <h1>Mootools Tooltips</h1>
<p>This shows an example of tooltips. Example directly from Freewebsforums.com main page.</p>
<p><a href="http://www.chrisesler.com/mootools/index.html">Back to example list</a></p>  
  <a href="#">Test tooltip</a>
<div style="position: absolute; visibility: hidden; opacity: 0; top: 169px; left: 47px;" class="tooltip"><h4>http://www.chrisesler....</h4><p>This is a tool tip example</p></div></body></html>